<template>
  <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible"
             :close-on-click-modal="false" draggable>
    <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
      <el-row :gutter="24">
        <el-col :span="12" class="mb20">
          <el-form-item label="商品标题" prop="title">
            <el-input v-model="form.title" placeholder="请输入商品标题"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="商品卖点" prop="sellPoint">
            <el-input v-model="form.sellPoint" placeholder="请输入商品卖点"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="商品价格" prop="price">
            <el-input v-model="form.price" placeholder="请输入商品价格"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="库存数量" prop="num">
            <el-input v-model="form.num" placeholder="请输入库存数量"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="售卖数量限制" prop="limitNum">
            <el-input v-model="form.limitNum" placeholder="请输入售卖数量限制"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="商品图片" prop="image">
            <el-input v-model="form.image" placeholder="请输入商品图片 多个用逗号分隔"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="所属分类" prop="cid">
            <el-tree-select
                v-model="form.cid"
                :data="form.parentData"
                :render-after-expand="false"
                :props="{ value: 'id', label: 'name', children: 'children' }"
                class="w100"
                clearable
                check-strictly
                :placeholder="$t('sysmenu.inputParentIdTip')"
            >
            </el-tree-select>
          </el-form-item>
        </el-col>
        <!--        1正常 0下架-->
        <el-col :span="12" class="mb20">
          <el-form-item label="商品状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio :label="0">下架</el-radio>
              <el-radio :label="1">正常</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
<!--        1-正常，0-已售-->
        <el-col :span="12" class="mb20">
          <el-form-item label="售卖限制" prop="limitStatus">
            <el-radio-group v-model="form.limitStatus">
              <el-radio :label="0">已售</el-radio>
              <el-radio :label="1">正常</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="身份" prop="customType">
            <el-radio-group v-model="form.customType">
              <el-radio-button :label="0">债务人</el-radio-button>
              <el-radio-button :label="1">债权人</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="本金" prop="principal">
            <el-input v-model="form.principal" placeholder="请输入本金"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="利息" prop="interest">
            <el-input v-model="form.interest" placeholder="请输入利息"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="逾期时间" prop="overdueMonth">
            <el-input-number v-model="form.overdueMonth" :min="1" controls-position="right"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="诉讼佣金比例" prop="commission1">
            <el-input v-model="form.commission1" placeholder="请输入诉讼佣金比例"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="非诉讼佣金比例" prop="commission2">
            <el-input v-model="form.commission2" placeholder="请输入非诉讼佣金比例"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="债权人所在地" prop="creditorAddress">
            <el-input v-model="form.creditorAddress" placeholder="请输入债权人所在地"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="债务人所在地" prop="debtAddress">
            <el-input v-model="form.debtAddress" placeholder="请输入债务人所在地"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="是否有担保" prop="guarantee">
            <el-radio-group v-model="form.guarantee">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="是否有抵押" prop="mortgage">
            <el-radio-group v-model="form.mortgage">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="是否失联" prop="contact">
            <el-radio-group v-model="form.contact">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="是否有偿还能力" prop="pay">
            <el-radio-group v-model="form.pay">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="凭证是否齐全" prop="voucher">
            <el-radio-group v-model="form.voucher">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="佣金比例高" prop="hight">
            <el-input v-model="form.hight" placeholder="请输入佣金比例高"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="法律关系明确" prop="law">
            <el-radio-group v-model="form.law">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="详细信息" prop="content">
            <el-input v-model="form.content" placeholder="请输入详细信息"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="联系人" prop="contactPerson">
            <el-input v-model="form.contactPerson" placeholder="请输入联系人"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="联系人电话" prop="tel">
            <el-input v-model="form.tel" placeholder="请输入联系人电话"/>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
        </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="MallProductDialog">
import { useDict } from '/@/hooks/dict';
import { useMessage } from "/@/hooks/message";
import { getObj, addObj, putObj } from '/@/api/zhaikucloud/mallProduct'
import { rule } from '/@/utils/validate';
import {fetchTree} from "/@/api/zhaikucloud/mallProductType";
const emit = defineEmits(['refresh']);

// 定义变量内容
const dataFormRef = ref();
const visible = ref(false)
const loading = ref(false)
// 定义字典

// 提交表单数据
const form = reactive({
  id:'',
  title: '',
  sellPoint: '',
  price: '',
  num: '',
  limitNum: '',
  image: '',
  cid: '',
  status: '',
  limitStatus: '',
  customType: '',
  principal: '',
  interest: '',
  overdueMonth: '',
  commission1: '',
  commission2: '',
  creditorAddress: '',
  debtAddress: '',
  guarantee: '',
  mortgage: '',
  contact: '',
  pay: '',
  voucher: '',
  hight: '',
  law: '',
  content: '',
  contactPerson: '',
  tel: '',
  parentData: [] as any[], // 上级菜单数据
});

// 定义校验规则
const dataRules = ref({
  title: [{required: true, message: '商品标题不能为空', trigger: 'blur'}],
  sellPoint: [{required: true, message: '商品卖点不能为空', trigger: 'blur'}],
  price: [{required: true, message: '商品价格不能为空', trigger: 'blur'}],
  num: [{required: true, message: '库存数量不能为空', trigger: 'blur'}],
  limitNum: [{required: true, message: '售卖数量限制不能为空', trigger: 'blur'}],
  image: [{required: true, message: '商品图片 多个用逗号分隔不能为空', trigger: 'blur'}],
  cid: [{required: true, message: '所属分类不能为空', trigger: 'blur'}],
  status: [{required: true, message: '商品状态 1正常 0下架不能为空', trigger: 'blur'}],
  limitStatus: [{required: true, message: '售卖限制,1-正常，0-已售不能为空', trigger: 'blur'}],
  customType: [{required: true, message: '身份不能为空', trigger: 'blur'}],
  principal: [{required: true, message: '本金不能为空', trigger: 'blur'}],
  interest: [{required: true, message: '利息不能为空', trigger: 'blur'}],
  overdueMonth: [{required: true, message: '逾期时间不能为空', trigger: 'blur'}],
  commission1: [{required: true, message: '诉讼佣金比例不能为空', trigger: 'blur'}],
  commission2: [{required: true, message: '非诉讼佣金比例不能为空', trigger: 'blur'}],
  creditorAddress: [{required: true, message: '债权人所在地不能为空', trigger: 'blur'}],
  debtAddress: [{required: true, message: '债务人所在地不能为空', trigger: 'blur'}],
  guarantee: [{required: true, message: '是否有担保不能为空', trigger: 'blur'}],
  mortgage: [{required: true, message: '是否有抵押不能为空', trigger: 'blur'}],
  contact: [{required: true, message: '是否失联不能为空', trigger: 'blur'}],
  pay: [{required: true, message: '是否有偿还能力不能为空', trigger: 'blur'}],
  voucher: [{required: true, message: '凭证是否齐全不能为空', trigger: 'blur'}],
  hight: [{required: true, message: '佣金比例高不能为空', trigger: 'blur'}],
  law: [{required: true, message: '法律关系明确不能为空', trigger: 'blur'}],
  content: [{required: true, message: '详细信息不能为空', trigger: 'blur'}],
  contactPerson: [{required: true, message: '联系人不能为空', trigger: 'blur'}],
  tel: [{required: true, message: '联系人电话不能为空', trigger: 'blur'}],
})

// 打开弹窗
const openDialog = (id: string) => {
  visible.value = true
  form.id = ''

  // 重置表单数据
  nextTick(() => {
    dataFormRef.value?.resetFields();
  });

  // 获取mallProduct信息
  if (id) {
    form.id = id
    getmallProductData(id)
  }
  // 渲染上级菜单列表树
  getAllMenuData();
};

// 提交
const onSubmit = async () => {
  const valid = await dataFormRef.value.validate().catch(() => {});
  if (!valid) return false;

  try {
    loading.value = true;
    form.id ? await putObj(form) : await addObj(form);
    useMessage().success(form.id ? '修改成功' : '添加成功');
    visible.value = false;
    emit('refresh');
  } catch (err: any) {
    useMessage().error(err.msg);
  } finally {
    loading.value = false;
  }
};


// 初始化表单数据
const getmallProductData = (id: string) => {
  // 获取数据
  loading.value = true
  getObj(id).then((res: any) => {
    Object.assign(form, res.data)
  }).finally(() => {
    loading.value = false
  })
};

// 从后端获取菜单信息（含层级）
const getAllMenuData = () => {
  form.parentData = [];
  fetchTree({
    lazy: Object,
    type: '0',
  }).then((res) => {
    let menu = {
      id: '0',
      name: '根菜单',
      children: [],
    };
    menu.children = res.data;
    form.parentData.push(menu);
  });
};

// 暴露变量
defineExpose({
  openDialog
});
</script>